<script setup lang="ts">
import { defineProps, ref, watch, reactive } from 'vue';
import { useBooleanStore } from '@/store';
import { getUserJob } from '@/utils/auth';
import { Notification, TableRowSelection } from '@arco-design/web-vue';
import { deletDto, updateWmsDeliveryCo } from '@/api/material-receipt';

const props = defineProps<{
  tableData: any;
}>();
const columns: any[] = [
  {
    title: '序号',
    dataIndex: 'id',
    slotName: 'id',
    align: 'center',
  },
  {
    title: '状态',
    dataIndex: 'status',
  },
  {
    title: '是否有效',
    dataIndex: 'isEff',
    sortable: {
      sortDirections: ['ascend', 'descend'],
    },
  },
  {
    title: '需求单位',
    dataIndex: 'requireShop',
    sortable: {
      sortDirections: ['ascend', 'descend'],
    },
  },
  {
    title: '条码',
    dataIndex: 'barcode',
    sortable: {
      sortDirections: ['ascend', 'descend'],
    },
  },
  {
    title: '合格证信息',
    dataIndex: 'mesCheckQualiticationId',
    sortable: {
      sortDirections: ['ascend', 'descend'],
    },
  },
  {
    title: '图号',
    dataIndex: 'itemCode',
    sortable: {
      sortDirections: ['ascend', 'descend'],
    },
  },

  {
    title: '质编/件号',
    dataIndex: 'qualityCode',
    sortable: {
      sortDirections: ['ascend', 'descend'],
    },
  },

  {
    title: '型号',
    dataIndex: 'mProductNumber',
    sortable: {
      sortDirections: ['ascend', 'descend'],
    },
  },

  {
    title: '问题类型',
    dataIndex: 'problemType',
    sortable: {
      sortDirections: ['ascend', 'descend'],
    },
  },

  {
    title: '问题内容',
    dataIndex: 'problemContent',
    sortable: {
      sortDirections: ['ascend', 'descend'],
    },
  },

  {
    title: '发起人',
    dataIndex: 'applyName',
    sortable: {
      sortDirections: ['ascend', 'descend'],
    },
  },
  {
    title: '发起时间',
    dataIndex: 'applyDate',
    sortable: {
      sortDirections: ['ascend', 'descend'],
    },
  },

  {
    title: '归零发起时间',
    dataIndex: 'endApplyDate',
    sortable: {
      sortDirections: ['ascend', 'descend'],
    },
  },
  {
    title: '归零人',
    dataIndex: 'empName',
    sortable: {
      sortDirections: ['ascend', 'descend'],
    },
  },

  {
    title: '归零时间',
    dataIndex: 'endDate',
    sortable: {
      sortDirections: ['ascend', 'descend'],
    },
  },

  // {
  //   title: '操作',
  //   dataIndex: 'action',
  //   slotName: 'action',
  //   align: 'center',
  //   fixed: 'right',
  // },
];
const selectedKeys = ref<any>([]);
const rowSelection: TableRowSelection = reactive({
  type: 'checkbox',
  showCheckedAll: true,
  onlyCurrent: false,
});
const booleanStore = useBooleanStore();
// 创建一个响应式的本地副本
const localTableData = ref<any[]>([]);
// 数据库一共有多少条
const total = ref<number>(0);
const pageNum = ref<number>(1);
const pageSize = ref<number>(30);

// 监听props.tableData的变化，并更新本地副本
watch(
  () => props.tableData,
  () => {
    localTableData.value = props.tableData?.responseBody?.result || [];
    total.value = props.tableData?.responseBody?.pageParameter?.totalCount || 0;
  },
  { immediate: true }
);

function change(e: any) {
  pageNum.value = e;
}
function changeSize(e: any) {
  pageSize.value = e;
}
const getUserJobNumber = ref<any>(getUserJob());
async function onEdit(record: any) {
  const info: any = {
    applyEmpcode: getUserJobNumber.value,
    ip: 'localhost',
    deliveryCoordinates: [record],
  };
  const data = await updateWmsDeliveryCo(info);
  if (data.retCode === '200') {
    Notification.success({
      title: '成功',
      content: data.message,
      closable: true,
    });
  } else {
    Notification.error({
      title: '失败',
      content: data.message,
      closable: true,
    });
  }
  booleanStore.watchUpdate(1);
}
// 删除
async function onDel(record: any) {
  const info: any = {
    applyEmpcode: getUserJobNumber.value,
    data: [record],
  };
  const data = await deletDto(info);
  if (data.retCode === '200') {
    Notification.success({
      title: '成功',
      content: data.message,
      closable: true,
    });
  } else {
    Notification.error({
      title: '失败',
      content: data.message,
      closable: true,
    });
  }
  booleanStore.watchUpdate(1);
}
// 监听页面变化
watch([pageNum, pageSize], () => {
  booleanStore.setPage(pageNum.value, pageSize.value, 2);
});
// 监听协调单勾选数据
watch(
  selectedKeys,
  () => {
    booleanStore.setListFive(selectedKeys);
  },
  { deep: true }
);
watch(
  () => booleanStore.boolValue4,
  () => {
    if (booleanStore.num4 === 7) selectedKeys.value = [];
  }
);
</script>

<template>
  <div>
    <a-table
      v-model:selectedKeys="selectedKeys"
      :stripe="true"
      class="top-table"
      :pagination="false"
      row-key="wmsDeliveryCoordinateId"
      :columns="columns"
      :data="localTableData"
      :row-selection="rowSelection"
    >
      <template #id="{ record }">{{
        localTableData.indexOf(record) + 1
      }}</template>
      <template #action="{ record }">
        <!-- <a-button type="text" class="font-color" @click="onEdit(record)"
          >提交</a-button
        > -->
        <a-popconfirm
          content="确定删除吗?"
          ok-text="确认"
          cancel-text="取消"
          @ok="onDel(record)"
        >
          <a-button type="text" class="font-color">删除</a-button>
        </a-popconfirm>
      </template>
    </a-table>
    <div class="page-position">
      <a-pagination
        :total="total"
        :current="pageNum"
        :page-size="pageSize"
        show-total
        show-jumper
        :show-page-size="true"
        :page-size-options="[30, 50, 100, 500]"
        @change="change"
        @update:page-size="changeSize"
      />
    </div>
  </div>
</template>

<style scoped>
.top-table {
  white-space: nowrap;
}
.page-position {
  margin-top: 20px;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>
